<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('编辑分类')">
</head>
<body>
<div th:replace="include/admin/adminNavigator::html"></div>
<script>
   $(function () {
       var data4Vue ={
           uri:"categories",
           listURL:'admin_category_list',
           bean:{},
           file:null
       };

       //viewModel
       var vue = new Vue({
           el:"#workingArea",
           data:data4Vue,
           mounted:function(){
               this.get();
           },
           methods:{
               get:function () {
                   var id = getUrlParms("id");
                   var url = this.uri + "/" + id;
                   axios.get(url).then(function (response) {
                       vue.bean = response.data;
                   })
               },
               update:function(){
                    if(!checkEmpty(this.bean.name,"分类名称")){
                        return;
                    }
                    var url = this.uri +"/"+this.bean.id;
                    var formData = new FormData();
                    formData.append("image",this.file);
                    formData.append("name",this.bean.name);
                    axios.put(url,formData).then(function(response){
                        location.href = vue.listURL;
                    });
               },
               getFile:function(event){
                   this.file = event.target.files[0];
               }
           }
       });
   })
</script>
<div id="workingArea">
    <ol class="breadcrumb">
        <li>
            <a href="admin_category_list">所有分类</a>
        </li>
        <li class="active">编辑分类</li>
    </ol>

    <div class="panel panel-waring editDiv">
        <div class="panel-heading">
            编辑分类
        </div>
        <div class="panel-body">
            <table class="editTable">
                <tr>
                    <td>分类名称</td>
                    <td>
                        <input @keyup.enter="update" v-model="bean.name" type="text" class="form-control">
                    </td>
                </tr>
                <tr>
                    <td>分类图片</td>
                    <td>
                        <input id="categoryPic" type="file" accept="image/*" name="image" @change="getFile($event)">
                    </td>
                </tr>
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <input type="hidden" name="id" v-model="bean.id">
                        <a href="#nowhere" class="btn btn-success" @click="update">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>